<%@ page import="java.util.Map" %><%--
  Created by IntelliJ IDEA.
  User: zhouh
  Date: 2022/5/20
  Time: 17:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
</head>
<body>

<%--右边按钮--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="pass">重置密码</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<%--右边按钮--%>

<%--头部工具栏--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">删除多条</button>
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<%--头部工具栏--%>

<%--添加--%>
<form class="layui-form" action="" id="saveUserForm" style="display: none">
    <div class="layui-form-item">
        <div class="layui-upload" style="margin-bottom: 10px">
            <label class="layui-form-label">图片</label>
            <div class="layui-upload-list">
                <div style="float: left" id="adds">
                    <img class="layui-upload-img" name="avatar" id="demo2"
                         style="width: 80px;height: 80px;border-radius:80px;">
                </div>
                <div style="width: 100px;float: left;margin-left: 30px">
                    <div id="remove" class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo"
                         style="margin-bottom: 10px">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                    <button type="button" class="layui-btn" id="test2">上传图片</button>
                </div>

            </div>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" required lay-verify="required|username" placeholder="请输入用户名"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">部门</label>
        <div class="layui-input-block">
            <select name="deptno" id="select">

            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formSaveUser">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<%--添加--%>
<%--修改--%>
<form class="layui-form" action="" id="updateFrom" style="display: none;width: 400px;">
    <div class="layui-form-item">
        <div class="layui-upload" style="margin-bottom: 10px">
            <label class="layui-form-label">图片</label>
            <div class="layui-upload-list">
                <div style="float: left" id="add">
                    <img class="layui-upload-img" name="avatar" id="demo1"
                         style="width: 80px;height: 80px;border-radius:80px;">
                </div>
                <div style="width: 100px;float: left;margin-left: 30px">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo"
                         style="margin-bottom: 10px">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                </div>

            </div>

        </div>
    </div>


    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">id</label>
        <div class="layui-input-block">
            <input type="text" name="userid" id="userid" readonly required lay-verify="required"
                   placeholder="请输入id"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" id="username1" required autocomplete="off" lay-verify="username"
                   placeholder="请输入用户名"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门</label>
        <div class="layui-input-block">
            <select name="deptno" id="select1">

            </select>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateBut">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<%--修改--%>

<%--修改密码--%>
<form class="layui-form" action="" id="passwords" style="display: none">
    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">id</label>
        <div class="layui-input-block">
            <input type="text" name="userid" id="useridpass" readonly required lay-verify="required"
                   placeholder="请输入id"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" id="password2" required lay-verify="required|password"
                   placeholder="请输入密码" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="passs">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<%--修改密码--%>

<%--条件查询--%>
<form class="layui-form" action="">

    <div class="layui-inline">
        <label class="layui-form-label">用户编号</label>
        <div class="layui-input-inline">
            <input type="text" name="userid" placeholder="请输入用户编号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
            <button id="search_reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <div class="layui-inline" style="margin-right: 0px">
        <div class="layui-input-inline">
            <span>
                用户名：
            </span>
            <span>
                <%request.getAttribute("user");%>
            </span>
            <button class="layui-btn" lay-submit lay-filter="outLogin">退出</button>
        </div>
    </div>
</form>
<%--条件查询--%>


<form id="userList" lay-filter="test">

</form>
<script>

    // 修改
    layui.use(['upload', 'element', 'layer'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/springMVC/userinfo/upload.do' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code === 1) {
                    return layer.msg('上传失败');
                } else {
                    $("#img").val(res.msg);
                    console.log(res.msg);
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                console.log(n);
                console.log(elem)
                console.log(e)
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n === 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });
    // 修改


    // 添加
    layui.use(['upload', 'element', 'layer'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test2'
            , url: '/springMVC/userinfo/upload.do' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo2').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code === 1) {
                    return layer.msg('上传失败');
                } else {
                    $("#img").val(res.msg);
                    console.log(res.msg);
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                console.log(n);
                console.log(elem)
                console.log(e)
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n === 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });
    // 添加


    layui.use(['jquery', 'form', 'table','element'], function () {
        var table = layui.table;
        var form = layui.form;
        $ = layui.$;
        var element = layui.element;

        // $("#username1").blur(function (){
        //     // alert("145")
        //     $.ajax({
        //         url:
        //     })
        // })

        form.on('submit(outLogin)', function (data) {
            $.ajax({
                url: "/login?mothed=outLogin",
                data: {},
                dataType: "json",
                type: "post",
            })
        });


        function select(obj, data) {
            alert(obj.event())
        }


        form.verify({
            username: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '用户名不能有特殊字符';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return '用户名不能全为数字';
                }

                //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
                if (value === 'xxx') {
                    alert('用户名不能为敏感词');
                    return true;
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
        });


        table.render({
            elem: '#userList',
            height: 500,
            url: '/springMVC/userinfo/showUserinfo.do',
            toolbar: '#toolbarDemo',
            page: 5,
            limit: 5,
            autoSort: false,
            limits: [5, 10, 15, 20, 25, 30, 100, 200],
            cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {field: 'userid', title: '用户编号', width: 120, sort: true, fixed: 'left', align: 'center'},
                {field: 'username', title: '用户名', width: 100, sort: true, align: 'center'},
                {field: 'password', title: '密码', width: 100, align: 'center'},
                {field: 'salt', title: '盐值', width: 180, align: 'center'},
                {field: 'deptno', title: '部门编号', width: 90, align: 'center'},
                {
                    field: 'avatar', title: '头像', width: 90,
                    templet: function (ret) {
                        return '<img src="' + ret.avatar + '" />';
                    }, align: 'center'
                },
                {
                    field: 'deptname', title: '所属部门', width: 90,
                    templet: function (ret) {
                        return ret.dept.deptname;
                    }, align: 'center'
                },
                {
                    field: 'location', title: '部门位置', width: 90,
                    templet: function (ret) {
                        return ret.dept.location;
                    }, align: 'center'
                },
                {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200, align: 'center'},
            ]]
        })

        table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('userList', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });

            //layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
        });


        form.on('submit(formDemo)', function (data) {
            // console.log(data.field);//当前容器的所有表单字段
            // console.log(data.elem);//被执行元素的Demo对象，一般为button
            // console.log(data.form);//被执行提交的form对象一般存在form对象才执行
            table.reload('userList', {
                where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    userid: data.field.userid //第一个查询条件
                    , username: data.field.username//第二个查询条件
                },
                page: {

                    curr: 1 //重新从第 1 页开始
                },
            });
            return false;
        });
        // 搜索表单重置
        $("#search_reset").click(function () {
            table.reload('userList', {
                where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    searchstudentid: "" //第一个查询条件
                    , searchstudentname: ""//第二个查询条件
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                },
            });
        });


        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        // layer.alert(JSON.stringify(data));
                        var str = [];

                        for (var i = 0; i < data.length; i++) {
                            str[i] = data[i].userid;
                        }
                        // layer.alert(str[0]);

                        $.ajax({
                            url: "/springMVC/userinfo/" + str.join(",") + "/deleteUserinAll.do",
                            type: "DELETE",
                            dataType: "JSON",
                            // data: {id: str.join(",")},
                            success: function (ret) {
                                if (ret.code === 0) {

                                    table.reload('userList', {
                                        page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                    });
                                    layer.closeAll();//关闭对话框
                                }
                                layer.msg(ret.msg);
                            }
                        });
                        table.reload('userList', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

                        break;
                    case 'add':
                        layer.open({
                            title: '添加用户',
                            type: 1,
                            content: $("#saveUserForm"),
                            area: ['500px', '400px']
                        })
                        $.ajax({
                            url: "/springMVC/userinfo/deptShow.do",
                            type: "GET",
                            dataType: "JSON",
                            success: function (ret) {
                                if (ret.code === 0) {
                                    //<option value="0">写作</option>
                                    var htmlStr = "";
                                    var data = obj.data;
                                    // layer.alert(data.deptid)
                                    for (let i = 0; i < ret.data.length; i++) {
                                        htmlStr += "<option  value=" + ret.data[i].deptid + ">" +
                                            ret.data[i].deptname +
                                            "</option>"
                                    }
                                    $("#select").html(htmlStr);
                                    //重新渲染表单
                                    form.render('select');
                                }
                            }
                        });
                        // form.on('select(test)', function (data) {
                        //     var id= $("#select").val();
                        //
                        //    if (Number(id) === 0){
                        //        $("#desibld").addClass('layui-btn-disabled').attr("disabled",false);
                        //    } else {
                        //        $("#desibld").addClass('layui-btn-disabled').attr("disabled",true);
                        //    }
                        // });
                        form.on('submit(formSaveUser)', function (data) {

                            //ajax方式提交表单数据，将数据保存至数据库中
                            $.ajax({
                                url: "/springMVC/userinfo/addUserinfo.do",
                                type: "POST",
                                dataType: "JSON",
                                data: data.field,
                                success: function (ret) {
                                    if (ret.code === 0) {
                                        $("#demo1").remove();
                                        $("#adds").html("<img class=\"layui-upload-img\" name=\"avatar\" id=\"demo1\"\n"
                                            + "                         style=\"width: 80px;height: 80px;border-radius:80px;\">");
                                        // $("#demo2").removeAttr("src");
                                        element.progress('demo', ""); //可配合 layui 进度条元素使用
                                        $("#saveUserForm")[0].reset();
                                        layui.form.render();
                                        layer.closeAll();//关闭对话框
                                        table.reload('userList', {
                                            page: {
                                                curr: 1 //重新从第 1 页开始
                                            }
                                        });
                                        //重新渲染表单
                                    }
                                    layer.msg(ret.msg);
                                }
                            });
                            table.reload('userList', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            });


                            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

                        });
                        break;
                    case
                    'isAll'
                    :
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;

                    //自定义头工具栏右侧图标 - 提示
                    case
                    'LAYTABLE_TIPS'
                    :
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                }
                ;
            }
        );

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                //ajax方式提交表单数据，将数据保存至数据库中
                layer.confirm('真的删除行么', function (index) {
                    //删除数据库中
                    $.ajax({
                        url: "/springMVC/userinfo/" + data.userid + "/deleteUserinAll.do",
                        type: "DELETE",
                        dataType: "JSON",
                        // data: {id: data.userid},
                        success: function (result) {
                            if (result.code === 0) {

                                //关闭对话框
                                layer.closeAll(); //疯狂模式，关闭所有层
                                //刷新表格数据
                                layer.msg(result.msg);

                                table.reload('userList', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                                return false;

                                //阻止表单跳转。如果需要表单跳转，去掉这段即可。

                            }
                            layer.msg(result.msg);
                        }

                    });
                });
            } else if (obj.event === 'edit') {
                layer.confirm('真的修改行么', function (index) {
                    console.log(data.userid)
                    //修改数据库中
                    $.ajax({
                        url: "/springMVC/userinfo/updateKey.do",
                        type: "GET",
                        dataType: "JSON",
                        data: {id: data.userid},
                        success: function (data) {
                            if (data.code === 0) {
                                layer.open({
                                    title: '修改用户',
                                    type: 1,
                                    content: $("#updateFrom"),
                                    area: ['600px', '400px']
                                })
                                $("#username1").val(data.data[0].username);
                                $("#userid").val(data.data[0].userid);
                                console.log(data.data[0].avatar)
                                $("#demo1").attr("src", data.data[0].avatar);
                                $.ajax({
                                    url: "/springMVC/userinfo/deptShow.do",
                                    type: "GET",
                                    dataType: "JSON",
                                    success: function (ret) {
                                        if (ret.code === 0) {
                                            //<option value="0">写作</option>
                                            var htmlStr = "";
                                            var data = obj.data;
                                            // layer.alert(data.deptid)
                                            for (let i = 0; i < ret.data.length; i++) {
                                                if (data.deptno === ret.data[i].deptid) {
                                                    //如果当前选中的行中的部门id和后台回传的集合中的部门id相等，选中这个部门
                                                    htmlStr += "<option selected value=" + ret.data[i].deptid + ">" +
                                                        ret.data[i].deptname +
                                                        "</option>"
                                                } else {
                                                    htmlStr += "<option value=" + ret.data[i].deptid + ">" +
                                                        ret.data[i].deptname +
                                                        "</option>"
                                                }

                                            }
                                            $("#select1").html(htmlStr);
                                            //重新渲染表单
                                            form.render('select');
                                        }
                                    }
                                });


                            }
                        }

                    });


                    form.on('submit(updateBut)', function (data) {
                        console.log(data.field.userid)
                        //ajax方式提交表单数据，将数据保存至数据库中
                        $.ajax({
                            url: "/springMVC/userinfo/updateUserinfo.do",
                            type: "PUT",
                            dataType: "JSON",
                            data: data.field,
                            success: function (ret) {
                                if (ret.code === 0) {
                                    $("#demo1").remove();

                                    element.progress('demo', ""); //可配合 layui 进度条元素使用
                                    $("#updateFrom")[0].reset();
                                    layui.form.render();
                                    layer.closeAll();//关闭对话框
                                    layer.msg(ret.msg);
                                    table.reload('userList', {
                                        page: {
                                            curr: this.page //重新从第 1 页开始
                                        }
                                    });
                                    return false;
                                }
                                layer.msg(ret.msg);
                            }
                        });
                        table.reload('userList', {
                            page: {
                                curr: this.page //重新从第 1 页开始
                            }
                        });
                        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                    });


                });
            } else if (obj.event === 'pass') {
                layer.confirm('真的重置密码吗', function (index) {
                    //修改数据库中
                    layer.open({
                        title: '修改密码',
                        type: 1,
                        content: $("#passwords"),
                        area: ['500px', '300px']
                    })
                    $("#useridpass").val(data.userid)
                    form.on('submit(passs)', function (data) {
                        $.ajax({
                            url: "/springMVC/userinfo/updatePass.do",
                            type: "PUT",
                            dataType: "JSON",
                            data: data.field,
                            success: function (rets) {
                                if (rets.code === 0) {
                                    layer.closeAll();//关闭对话框
                                    // window.location.href="/html/login.jsp";
                                    layer.msg(rets.msg)
                                    $.ajax({
                                        url: "/stringMVC/views/show.jsp",
                                        data: {},
                                        dataType: "json",
                                        type: "post",
                                    })
                                    // window.location.href = "/html/login.jsp";
                                    parent.location.reload();

                                } else {
                                    layer.closeAll();//关闭对话框
                                    layer.msg(rets.msg)


                                }
                            }

                        });
                        return false;
                    });


                });
            }
        });
    });

</script>


</body>
</html>
